<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>预定</title>
    <link href="../lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/style_book.css">
</head>

<body>
    <div class="container-fluid">
        <header class="navbar navbar-fixed-top navbar-custom" id="navbar">
            <div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="cursor:pointer">
               <h4 class="brand">预订</h4> 
              <a class="navbar-brand" href="#"><span id="return" class="glyphicon glyphicon-menu-left"></span>商品详情</a>
            </div>
        </header>
        <div class="container-fluid" id="container">
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-12">
                            <h5>赏花踏青美食之旅 (5月9日出团)</h5>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-8">
                            <h5>数量:</h5>
                        </div>
                        <div class="col-xs-4">
                            <button type="button" class="btn btn-default btn-xs" >
                              <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                            </button>
                                <span id="count">1</span>
                            <button type="button" class="btn btn-default btn-xs" >
                              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-9">
                            <h5>价格:</h5>
                        </div>
                        <div class="col-xs-3">
                            <h5>65.00元</h5>
                        </div>
                    </div>
                </li>
            </ul>

            <ul class="list-group">
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-8">
                            <input class="form-control" id="phoneNumber" placeholder="请输入手机号">
                        </div>
                        <div class="col-xs-4">
                            <button class="btn btn-sm btn-primary">获取验证码</button>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-12">
                            <input type="email" class="form-control" id="captcha" placeholder="请输入手机验证码">
                        </div>
                    </div>
                </li>
            </ul>

            <h5>备注</h5>
            <textarea class="form-control" rows="3"></textarea>
            <div class="row">
                <button class="btn btn-success center-block" style="margin-top:2em;">提交订单</button>
            </div>
        </div>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/bootstrap/dist/js/bootstrap.min.js"></script>

</html>
